<template>
  <div class="col-wrapper"
       style="justify-content: center;width:100%;height: 100vh">
    <div class="content col-wrapper"
         style="justify-content: center">
      <h3 v-show="!isSuccess">{{ $t('正在等待银行业务结果请稍后') }}</h3>
      <img v-show="!isSuccess"
           src="../../../../assets/static/afterPay/loading.gif"
           alt=""/>
      <span v-show="!isSuccess"
            class="count">{{ count }}s</span>
      <span v-show="isSuccess">{{ text }}</span>
      <Button style="margin-top:10px"
              @click="$router.push({path:'/listhome'})"
              v-show="isSuccess">{{ $t('Homepage') }}
      </Button>
    </div>
  </div>
</template>

<script>
import '@/styles/flax.css'
import {uniwebpayQuery} from '@/api/merbership/userpay'

export default {
  name: 'afterPay',
  data() {
    return {
      count: 180,
      text: this.$t('请求失败'),
      interval1: null,
      interval2: null,
      isSuccess: false,
      order_no: '2021120120053619505'
    }
  },
  methods: {
    /**
     * 查询订单是否支付成功
     */
    uniwebpayQuery() {
      let order_no = String(this.$route.query.order_no)
      const pd = {
        order_no: order_no
      }
      uniwebpayQuery(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            if (res.data.msg === 'PARENT_SUCCESS') {
              this.text = this.$t('充值成功')
              this.count = 0
            } else {
              // this.uniwebpayQuery()
            }
          }
        })
    },
    /**
     * 模拟接口
     */
    getData() {
      this.uniwebpayQuery()
    },
    /**
     * 开始轮训
     */
    intervalGet() {
      this.interval2 = setInterval(() => {
        this.getData()
      }, 60000)
    }
  },
  watch: {
    count(val) {
      if (val === 0) {
        clearInterval(this.interval1)
        clearInterval(this.interval2)
        this.isSuccess = true
      }
    }
  },
  activated() {
    if (this.$route.query.status === 'PARENT_CANCELED') {
      this.text = '订单已取消'
      this.count = 0
    } else {
      this.order_no = this.$route.query.order_no
      let that = this
      this.getData()
      this.intervalGet()
      this.interval1 = setInterval(() => {
        that.count--
      }, 1000)
    }
  },
  deactivated() {
    this.count = 180
    this.isSuccess = false
    this.text = this.$t('请求失败')
    clearInterval(this.interval1)
    clearInterval(this.interval2)
  }
}
</script>

<style scoped>
.content {
  width: 309px;
  height: 300px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  font-size: 14px;
  line-height: 150%;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
}

.content > img {
  width: 68px;
  height: 68px;
}

.count {
  margin-top: 33px;
  color: rgba(80, 80, 80, 1);
  font-size: 30px;
  line-height: 150%;
  text-align: left;
}
</style>
